<template>
  <div class="nav-tabs flexLeftCenter" ref="tabScrollbarRef">
    <div v-for="(item, idx) in tabNar.tabList" @click="handleChange(item)" class="ba-nav-tab flexCenter"
      :class="tabNar.currentTab.name == item.name ? 'active' : ''" :key="idx">
      {{ item.meta.title }}
      <transition name="el-fade-in">
        <el-icon v-show="tabNar.tabList.length > 1" class="close-tab-icon" @click.stop="handleTabsRemove(item)" size="15">
          <Close />
        </el-icon>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import { useTabNar } from '@/stores/tabnar';
import { useRouter } from 'vue-router';
const tabNar = useTabNar()
const router = useRouter()
if (tabNar.currentTab == null) {
  tabNar.currentTab = {
    name: '',
  }
}
const handleTabsRemove = (route) => {
  if (tabNar.tabList.length === 1) {
    return;
  }
  tabNar.deleteTab(route)
  nextTick(() => {
    router.push({ name: tabNar.tabList[tabNar.tabList.length - 1].name});
  })
}

const handleChange = (route) => {
  router.push({...route})
}
</script>

<style lang="less" scoped>
.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  width: calc(100vw - 340px);
  

  &::-webkit-scrollbar {
    height: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background: #eaeaea;
    border-radius: var(--el-border-radius-base);
    box-shadow: none;
    -webkit-box-shadow: none;
  }

  &::-webkit-scrollbar-track {
    background: #f0f0f0;
  }

  &:hover {
    &::-webkit-scrollbar-thumb:hover {
      background: #c8c9cc;
    }
  }
}

.ba-nav-tab {
  white-space: nowrap;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  transition: all 0.3s;
  cursor: pointer;
  &.active {
    color: #ffd04b;
    background-color: var(--el-bg-color-page);
  }

  &:hover {
    color: #ffd04b;
    .close-tab-icon{
      display: block;
    }
  }
  .close-tab-icon{
    display: none;
    margin-left: 5px;
    cursor: pointer;
    &:hover{
      background: #999;
      border-radius: 50%;
      color: #fff;
    }
  }
}
</style>